<template>
    <div class="w-full">
        <a-card class="w-full" :loading="state.loading">
            <header class="flex justify-between items-center mb-2">
                <div class="left">
                    <SettingOutlined />
                    <span>
                        系统信息配置
                    </span>
                </div>
                <div class="right">
                    <a-button type="primary" @click="onSave">
                        保存
                    </a-button>
                </div>
            </header>
            <div class="sys-config">
                <div class="item h-[100px]">
                    <div class="title h-full">
                        系统图标
                    </div>
                    <div class="ctx">
                        <input style="display: none;" ref="fileRef" type="file" accept="image/*" @change="onFileChange">
                        <a-avatar style="cursor: pointer;" shape="square" :size="84" :src="state.formState.logo" @click="changeFile">
                            <template #icon><UserOutlined /></template>
                        </a-avatar>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <div class="title h-full">
                            系统主标题
                        </div>
                        <div class="ctx">
                            <a-input v-model:value="state.formState.title" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="title h-full">
                            系统副标题
                        </div>
                        <div class="ctx">
                            <a-input v-model:value="state.formState.viceTitle" />
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="title h-full">
                        系统描述
                    </div>
                    <div class="ctx">
                        <a-input v-model:value="state.formState.viceDesc" />
                    </div>
                </div>
                <div class="item">
                    <div class="title h-full">
                        水印内容
                    </div>
                    <div class="ctx">
                        <a-input v-model:value="state.formState.watermark" />
                    </div>
                </div>
                <div class="item">
                    <div class="title h-full">
                        版权说明：
                    </div>
                    <div class="ctx">
                        <a-input v-model:value="state.formState.copyright" />
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <div class="title h-full">
                            ICP备案号
                        </div>
                        <div class="ctx">
                            <a-input v-model:value="state.formState.icp" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="title h-full">
                            ICP地址
                        </div>
                        <div class="ctx">
                            <a-input v-model:value="state.formState.icpUrl" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="item" style="border-bottom: none;">
                        <div class="title h-full">
                            用户注册
                        </div>
                        <div class="ctx">
                            <a-radio-group v-model:value="state.formState.enableReg">
                                <a-radio
                                    v-for="i in useMapDictList('YesNoEnum')" 
                                    :key="i.value"
                                    :value="+i.value">
                                    {{ i.label }}
                                </a-radio>
                            </a-radio-group>
                        </div>
                    </div>
                    <div class="item" style="border-bottom: none;" v-if="state.formState.enableReg == 1">
                        <div class="title h-full">
                            注册方案
                        </div>
                        <div class="ctx">
                            <a-select
                                v-model:value="state.formState.regWayId"
                                class="w-full"
                            >
                                <a-select-option
                                    v-for="(item,index) in state.wayList" 
                                    :key="index"
                                    :value="item.value"
                                >
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </div>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script setup lang="ts" name="sysInfoSetting">
import { onBeforeMount, reactive ,ref} from 'vue';
import type { Type } from './type';
import { useMapDictList } from '@/hooks';
import { apiSysConfigSaveSysInfoPost, apiSysConfigSysInfoGet } from '@/api/sys/sysConfig';
import type { ResType } from '@/api/types';
import { fileToBase64, showMsg } from '@/utils';

defineOptions({
    name: "sysInfoSetting"
});
const fileRef = ref<HTMLInputElement>()

const state =reactive<Type>({
    formState:{
        logo:"",
        title:"",
        viceTitle:"",
        viceDesc:"",
        watermark:"",
        copyright:"",
        icp:"",
        icpUrl:"",
        enableReg:undefined,
        regWayId:2
    },
    loading:false,
    wayList:[],
    file:null
})

const onFileChange = (e:any)=>{
    const file = e.target.files[0];
    if(!file) return
    state.file = file
    state.formState.logo = URL.createObjectURL(file);
    
}
const changeFile = ()=>{
    fileRef.value?.click()
}
const onSave = async ()=>{
    if(state.file){
        state.formState.logoFileName = state.file.name
        state.formState.logoBase64 =await fileToBase64(state.file)
    }
    if(state.formState.enableReg == 1 && !state.formState.regWayId){
        showMsg("请选择注册方案",'success')
        return
    }

    await apiSysConfigSaveSysInfoPost(state.formState)

    state.file = null
    showMsg("保存成功",'success')
    window.location.reload()
}

const loadData = async ()=>{
    // 获取系统配置数据
    state.loading = true
    const res = await apiSysConfigSysInfoGet() as ResType<any>
    const data  = res.data.result
    state.wayList = data.wayList ?? []
    data.wayList = undefined
    state.formState = res.data.result
    state.loading = false
}

onBeforeMount(async()=>{
    await loadData()
})
</script>

<style lang="scss" scoped>
.sys-config{
    border: 1px solid #d9d9d9;
}

.item{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    .title{
        background-color: #f5f7fa;
        font-weight: 600;
        width: 250px;
        min-width: 250px;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 5px 10px;
    }
    .ctx{
        width: 100%;
        padding: 5px 10px;
    }
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>div {
        flex: 1;
        // 移除 width: 50%
        .title {
            min-width: 250px; // 使用min-width替代width
            width: 250px;
        }
    }
}
</style>